<template>
  <PageWrapper :class="prefixCls" title="">
    <template #headerContent>
      <div :class="`${prefixCls}__link`">
        <a @click="handleCreate" v-if="hasPermission('free:table:add')">
          <plus-outlined /><span>新增</span></a
        >
        <a><file-text-outlined /><span>文档</span></a>
      </div>
    </template>

    <Card title="数据库表" v-bind="$attrs">
      <template #extra>
        <a-button type="link" size="small" @click="reload">
          <template #icon>
            <reload-outlined />
          </template>
          刷新
        </a-button>
      </template>
      <List :grid="{ column: 4 }" :data-source="list">
        <template #renderItem="{ item }">
          <ListItem>
            <Card hoverable>
              <template #actions>
                <setting-outlined
                  key="setting"
                  v-if="hasPermission('free:table:config')"
                  @click="handleConfig(item)"
                />
                <edit-outlined
                  key="edit"
                  @click="handleEdit(item)"
                  v-if="hasPermission('free:table:edit')"
                />
                <Popconfirm
                  title="Are you sure delete this table?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="handleDelete(item)"
                >
                  <delete-outlined key="delete" v-if="hasPermission('free:table:remove')" />
                </Popconfirm>
              </template>
              <CardMeta :title="item.tableLabel">
                <template #description>
                  <div class="flex mt-2 h-10 text-secondary">{{ item.tableName }}</div>
                </template>
                <template #avatar>
                  <SvgIcon size="30" name="free-table" v-if="item.status == 0" />
                  <SvgIcon size="30" name="free-table-disable" v-else />
                </template>
              </CardMeta>
              <div class="flex justify-between text-secondary">
                <span>{{ item.createBy }}</span>
                <span>{{ formatT(item.createTime) }}</span>
              </div>
            </Card>
          </ListItem>
        </template>
      </List>
    </Card>
    <TableModal @register="registerModal" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onBeforeMount, ref } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import { getAllTableList, removeTable } from '/@/api/free/table';
  import { PageWrapper } from '/@/components/Page';
  import { Card, CardMeta, List, Popconfirm } from 'ant-design-vue';
  import { TableListItem } from '/@/api/free/model/freeModel';
  import { formatT } from '/@/utils/dateUtil';
  import { PlusOutlined, FileTextOutlined, ReloadOutlined } from '@ant-design/icons-vue';
  import TableModal from './TableModal.vue';
  import { useModal } from '/@/components/Modal';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useRouter } from 'vue-router';
  import { SettingOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    components: {
      List,
      ListItem: List.Item,
      Popconfirm,
      TableModal,
      PlusOutlined,
      FileTextOutlined,
      ReloadOutlined,
      SvgIcon,
      PageWrapper,
      Card,
      CardMeta,
      SettingOutlined,
      EditOutlined,
      DeleteOutlined,
    },
    setup() {
      const router = useRouter();
      const { hasPermission } = usePermission();
      const [registerModal, { openModal }] = useModal();
      let list = ref<Array<TableListItem>>([]);
      onBeforeMount(() => {
        reload();
      });

      function reload() {
        getAllTableList().then((res) => {
          list.value = res;
        });
      }

      function handleConfig(record: Recordable) {
        router.push({
          path: '/tool/freeColumn',
          query: {
            tableName: record.tableName,
          },
        });
      }

      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handleDelete(record: Recordable) {
        removeTable(record.tableName).then(() => {
          reload();
        });
      }

      function handleSuccess() {
        reload();
      }

      return {
        prefixCls: 'list-card',
        list,
        reload,
        formatT,
        registerModal,
        handleConfig,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        hasPermission,
      };
    },
  });
</script>
<style lang="less" scoped>
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }
  }
</style>
